<template>
  <div class="SelectBar">
    <div v-if="icon" class="icon">
      <nut-icon :name="icon" />
    </div>
    <div class="cont">
      <span v-if="name">
        {{ name }}
      </span>
      <span class="SelectBar_placeholder" v-else> {{ placeholder }} </span>
    </div>
    <div class="arrows">
      <!-- <nut-icon name="right" size="12" /> -->
      <nut-icon name="right" />
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  icon?: string
  placeholder?: string
  name?: string
}>()
</script>
<style lang="scss">
.SelectBar {
  display: flex;
  // padding: 10px 0;
  // border-bottom: 1px solid #eee;
  // line-height: 2;

  .icon {
    width: 30px;
    display: inline-flex;
    align-items: center;
    color: #8ab7fd;
    // border: 1px solid red;
  }

  .cont {
    flex: 1;
    // border: 1px solid red;
    line-height: 2;
  }

  .arrows {
    display: inline-flex;
    align-items: center;
    color: #ccc;
    // border: 1px solid red;
  }
}

.SelectBar_placeholder {
  color: #777;
}
</style>
